<script setup>
import { ref, onMounted } from 'vue';
import { useTaskStore } from './stores/taskStore';
import TaskBoard from './components/Taskboard.vue';
import MemberList from './components/MemberList.vue';
import Analytics from './components/Analytics.vue';

const store = useTaskStore();
const activeTab = ref('tasks');

// 初始化示例数据（仅用于演示，实际项目中可删除）
onMounted(() => {
  if (store.tasks.length === 0) {
    store.tasks = [
      {
        id: 1,
        title: '完成项目首页',
        description: '设计并实现任务管理系统首页',
        priority: 'high',
        status: 'todo',
        createdAt: new Date(),
        assignedTo: null
      },
      {
        id: 2,
        title: '实现任务拖拽功能',
        description: '使用HTML5拖拽API实现任务状态切换',
        priority: 'medium',
        status: 'doing',
        createdAt: new Date(),
        assignedTo: 1
      }
    ];
  }

  if (store.members.length === 0) {
    store.members = [
      { id: 1, name: '李华', capacity: 8, currentLoad: 1 },
      { id: 2, name: '王芳', capacity: 6, currentLoad: 0 }
    ];
  }
});
</script>

<template>
  <div class="app-container">
    <header class="app-header">
      <h1>智能任务管理系统</h1>
      <nav class="tabs">
        <button 
          :class="{ active: activeTab === 'tasks' }" 
          @click="activeTab = 'tasks'"
        >
          任务看板
        </button>
        <button 
          :class="{ active: activeTab === 'members' }" 
          @click="activeTab = 'members'"
        >
          成员管理
        </button>
        <button 
          :class="{ active: activeTab === 'analytics' }" 
          @click="activeTab = 'analytics'"
        >
          数据分析
        </button>
      </nav>
    </header>

    <main class="app-main">
      <div v-if="activeTab === 'tasks'" class="tab-content">
        <TaskBoard />
      </div>
      <div v-if="activeTab === 'members'" class="tab-content">
        <MemberList />
      </div>
      <div v-if="activeTab === 'analytics'" class="tab-content">
        <Analytics />
      </div>
    </main>
  </div>
</template>

<style scoped>
.app-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  font-family: Arial, sans-serif;
}

.app-header {
  text-align: center;
  margin-bottom: 30px;
}

.app-header h1 {
  color: #2c3e50;
  margin-bottom: 20px;
}

.tabs {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 20px;
}

.tabs button {
  padding: 8px 16px;
  background: #f0f0f0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s;
}

.tabs button.active {
  background: #42b983;
  color: white;
}

.tabs button:hover {
  background: #e0e0e0;
}

.tabs button.active:hover {
  background: #3aa876;
}

.app-main {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  padding: 20px;
}

.tab-content {
  min-height: 500px;
}
</style>